<template>
	<div class="page-wrap">
		<!-- <div class="chartItem item-0">
			<homeChart :chartOpts="orderPie" />
		</div>
		<div class="chartItem item-1">
			<homeChart :chartOpts="alarmBar" />
		</div> -->
		<div class="chartItem item-2">Welcome</div>
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			orderPie: {},
			alarmBar: {},
			orderLine: {},
		};
	},
	mounted() {},
	methods: {
		initPie() {
			this.orderPie = {
				title: {
					text: "当月各人员订单量",
					x: "center",
				},
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)",
				},
				legend: {
					orient: "vertical",
					left: "left",
					data: ["张三", "李四", "王五", "赵六"],
				},
				series: [
					{
						name: "访问来源",
						type: "pie",
						radius: "55%",
						center: ["50%", "60%"],
						data: [
							{ value: 335, name: "张三" },
							{ value: 310, name: "李四" },
							{ value: 234, name: "王五" },
							{ value: 135, name: "赵六" },
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)",
							},
						},
					},
				],
			};
		},
		initBar() {
			this.$api.getInventoryWarn().then((res) => {
				res = res.data || [];
				this.alarmBar = {
					title: {
						text: "库存告警排名",
					},
					tooltip: {},
					xAxis: {
						data: res.map((e) => e.productName),
					},
					yAxis: {},
					series: [
						{
							type: "bar",
							data: res.map((e) => e.count),
						},
					],
				};
			});
		},
		initLine() {
			this.$api.orderLine().then((res) => {
				const { date = [], orderCount = [] } = res || [];
				this.orderLine = {
					title: {
						text: "每日订单量",
					},
					xAxis: {
						type: "category",
						data: date,
					},
					yAxis: {
						type: "value",
					},
					series: [
						{
							data: orderCount,
							type: "line",
						},
					],
				};
			});
		},
	},
};
</script>

<style lang="less" scoped>
.page-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.chartItem {
	width: 45%;
	height: 45%;
	&.item-2 {
		width: 100%;
		height: 100%;
	}
}
</style>

